﻿{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}购物车 - 哆唻咪启蒙乐园{% endblock %}

{% block custom_content %}
    <section class="page-title center">
        <div class="container">
            <h2>购物车</h2>
            <ul>
                <li><a href="{% url 'main:index' %}">主页</a></li>
                <li><a href="#">购物车</a></li>
            </ul>
        </div>
    </section>

    <!--Cart Section-->
    <section class="cart-section">
        <div class="container">
            <!--Cart Outer-->
            <div class="cart-outer">
                {% if  cart_list %}
                    <form action="{% url 'shop:order' %}" method="post">
                        <div class="table-outer">
                            <table class="cart-table">
                                <thead class="cart-header">
                                <tr>
                                    <th class="prod-column">商品名称</th>
                                    <th>单位</th>
                                    <th class="price">单价</th>
                                    <th>数量</th>
                                    <th>总计</th>
                                    <th class="remove"><a href="#" class="remove-btn"><span
                                            class="fa fa-trash-o"></span></a>
                                    </th>
                                </tr>
                                </thead>

                                <tbody>
                                {% for cart in cart_list %}
                                    <tr class="cart_list_td " id="{{ cart.id }}">
                                        <td colspan="2" class="prod-column">
                                            <div class="column-box">
                                                <figure class="prod-thumb"><a
                                                        href="{% url 'shop:good_details' goods_id=cart.g_id.id %}">
                                                    <img src="{{ cart.g_id.pic.url }}" width="120" height="100"
                                                         alt="{{ cart.g_id.name }}"></a>
                                                </figure>
                                                <h3 class="prod-title padd-top-20">{{ cart.g_id.name }}</h3>
                                            </div>
                                        </td>
                                        <td class="price" id="price">{{ cart.g_id.price }}</td>
                                        <td class="qty">
                                            <input class="quantity-spinner" id="quantity" data-id="{{ cart.g_id.id }}"
                                                   type="text"
                                                   value="{{ cart.count }}"
                                                   name="quantity"></td>
                                        <td class="sub-total" id="sub-total">{{ cart.total }}</td>
                                        <td class="remove" cart_id = "{{ cart.id }}"><a class="remove-btn"><span
                                                class="fa fa-times"></span></a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="update-cart-box clearfix">
                            <div class="pull-left">
                                <div class="apply-coupon clearfix">
                                    <div class="form-group clearfix">
                                        <input type="text" id="cart-message" name="coupon-code" value=""
                                               placeholder="留言">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">

                            <div class="column cart-total col-md-6 col-sm-12 col-xs-12 col-md-offset-6">
                                <h3>购物车结算</h3>
                                <!--Totals Table-->
                                <ul class="totals-table">
                                    <li class="clearfix"><span class="col col-title">商品数量</span>
                                        <span class="col" id="t-count">{{ goods.pric }} 个 </span>
                                    </li>
                                    <li class="clearfix total"><span class="col col-title">需付金额</span>
                                        <span class="col" id="t-price">{{ goods.price }} 元</span>
                                    </li>
                                </ul>

                                <div class="margin-top-30"><a href="{% url 'shop:order' %}"
                                                              class="thm-btn thm-blue-bg btn-style-one">订单提交
                                    <span class="fa fa-long-arrow-right"></span></a>
                                </div>
                            </div>

                        </div>
                    </form>
                {% else %}
                    <div class="button center">
                        <button type="button"  class="thm-btn update-cart btn-style-one"><a href="{% url  'shop:shop'%}">购物车空空如也,快去添加吧！</a></button> &nbsp;
                    </div>
                {% endif %}
            </div>
        </div>
    </section>
{% endblock %}
{% block custom_body_js %}
    <script>
        //计算总件数以及总价格
        function update_total_price() {
            total_price = 0;
            total_count = 0;
            $('.cart_list_td').each(function () {
                p_price = $(this).find('#sub-total').text();
                total_price += parseFloat(p_price);
                total_count += 1;
            });
            $('#t-count').text(total_count);
            $('#t-price').text(total_price.toFixed(1));
        }

        //手动输入
        g_count = 0
        $('.quantity-spinner').focus(function () {
            g_count = $(this).val()
        })

        $('.quantity-spinner').blur(function () {

            sku_id = $(this).attr('data-id');
            count = $(this).val();

            if (parseInt(count <= 0) || isNaN(count)) {
                //输入值无效
                $(this).val(g_count);
                return
            }

            csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val()
            params = {sku_id, count, csrfmiddlewaretoken}
            $.ajaxSettings.async = false;
            $.post('/shop/cart/update', params, function (data) {
                if (data.res == 5) {
                    console.log(g_count);
                } else {
                    alert(data['errmsg']);
                    $(this).val(g_count)
                }
            });

            price = $(this).parents('tr').find('.price').text();
            total_p = parseFloat(price) * parseInt(count);
            $(this).parents('tr').find('.sub-total').text(total_p.toFixed(1))
        });
        update_total_price();

        //删除商品
        $('.cart_list_td').children('.remove').children('a').click(function () {

            cart_id = $(this).parents('tr').find('.remove').attr('cart_id');
            console.log('deletecat', cart_id);
            cart_remove = $(this).parents('tr');
            console.log(cart_id)
            $.post('/shop/cart/delete', {'cart_id': cart_id}, function (data) {
                    console.log(data)
                    if (data.res == 2) {
                        alert(data.message);
                        cart_remove.remove();
                        update_total_price();
                    } else {
                        alert(data.errmsg)
                    }
                }, 'json'
            )
        });

    </script>
{% endblock %}
